<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/common/taglibs.jsp" %>
<%@ taglib prefix ="s" uri="/struts-tags"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html>
<html lang="en">
	<head>
		<%@ include file="/common/common-css.jsp" %>
		<style>
		#jquery-table td{cursor:pointer !important}
		.load_bg{background:#000;opacity:0.1;left:0px;top:0px;position:fixed;height:100%;width:100%;overflow:hidden;z-index:10000;}
		.load_img{left:50%;top:180px;position:fixed;height:50px;overflow:hidden;z-index:20000;}
		.datepicker-orient-left{
			display: none !important;
		}
		</style>
	</head>
<body onload="loaddata()" class="no-skin">
<div  class="load_bg" style="display:none;" ></div>
<img src="http://img.xmiles.cn/commentloading.gif" class="load_img" style="display:none"/>
<div class="page-content">
<div class="page-header" style="margin-bottom:0px;padding-bottom:10px;">
</div>

<form id="queryForm" >
	<div class="page-content-area">
		
		<div class="row">
			<div class="col-sm-12">
				<div class="widget-box" style="border:0px solid #ccc; border-top:none;border-bottom:none;">
					<div class="widget-header widget-header-blue widget-header-flat">
						<h4 class="widget-title">选择条件进行查询</h4>
							
						<div class="widget-toolbar">
							<a href="#" data-action="collapse">
								<i class="ace-icon fa fa-chevron-up"></i>
							</a>
						</div>
					</div>

					<div class=" widget-body">
						<!-- <div class="widget-main" style="padding:12px;border:0px solid #ccc; border-top:none;border-bottom:none;"> -->
						<div class="widget-main" >
										<div class="form-group col-xs-12 col-sm-4 col-md-4 col-lg-4">
											<label class="col-sm-4 control-label"  style="text-align:right"  for="sex">时间:</label>
											<div class="col-sm-8">
												<input type="hidden" value="${paramsMap.channelCode }" id="code"/>
												<div class="input-daterange input-group">
													<input type="text" data-date-format="yyyy-mm-dd hh:ii" class="fromDate date-picker input-sm form-control" style="padding-left:0px" name="fromDate">
													<span class="input-group-addon" style="width:6px">
														<i class="fa fa-exchange"></i>
													</span>
													<input type="text" data-date-format="yyyy-mm-dd hh:ii" class="endDate date-picker input-sm form-control" style="padding-left:0px" name="endDate">
												</div>
											</div>
										</div>

							</div><!-- /.widget-main -->
					</div><!-- /.widget-body -->
				</div><!-- /.widget-box -->
			</div><!-- /.col-sm-12 -->
				<div class="col-md-12 center">
				<div class="clearfix form-actions">
				
					<button class="btn btn-purple  no-border" type="button" name="btn-query" onclick="query_any()" id="btn-query">
						<i class="ace-icon fa fa-search icon-on-right bigger-110"></i>
						查询
					</button>
					&nbsp;&nbsp;&nbsp;
					<button class="btn btn-grey  no-border" type="reset">
						<i class="ace-icon fa fa-undo icon-on-right bigger-110"></i>
						重置
					</button>
					&nbsp;&nbsp;&nbsp;
				  </div>
		   </div>
		</div><!-- /.row -->
				 
		<!--highcharts -->		 
		<div class="row" style="margin-bottom:20px;">
			<div id="highcharts-container" class="col-xs-12"></div>
		</div>			 
		
		<div class="row">
			<div class="col-xs-12">
				<table id="jquery-table201" class="table table-striped table-bordered table-hover">			
				</table>
			</div>
		</div>
	</div><!-- /.page-content-area -->
	
	</form>

	
	
</div><!-- /.page-content -->

<%@ include file="/common/common-js.jsp" %>
<script type="text/javascript" src="${ctx}/js/call_func.js"></script>
<script type="text/javascript" src="${ctx}/js/jquery.form.js"></script>
<!-- inline scripts related to this page -->
<script type="text/javascript">

jQuery(function($) {
	//日期时间插件
	$('.date-picker').datetimepicker({
		  	language:  'zh-CN',
	        todayBtn:  1,
			autoclose: 1,
			todayHighlight: 1,
			startView: 2,
			minView:2,
			forceParse: 0,
			showMeridian: 1,
			format: 'yyyy-mm-dd'
	}).next().on(ace.click_event, function(){
		$(this).prev().focus();
	});
	
	
});
var jqTable201 = null;
function query_any(){
	
	loaddata();
 }

  var loaddata = function(){
  	jQuery(function($) {
  		
  		 $('.dataTables_wrapper').css('display', 'none');
  	      //详情统计
  	      if (jqTable201 != null) {
  	  	  $('#jquery-table201_wrapper').css('display','block');
  	  	  jqTable201.fnDraw();
  	  	  		return;
  	  	  		}
  		
  		jqTable201 = $('#jquery-table201').dataTable({
  		    //数据列控制（包括对应返回JSON属性名称，对应表头列索引位置、数据转换封装等）
  		    "columnDefs": [
				{
					  "title":"渠道名称",
					  "name":"channel",
					  "data": "channel",
				  	  "targets": [0], 
					  "bSortable": true,
					  "width": "23%"
				},
				{
				 	  "title":"渠道号",
				 	  "name":"channelCode",
				 	  "data": "channelCode",
				  	  "targets": [1],
				  	"bSortable": true,
					 	  "width": "8%"
				},
				{
				 	  "title":"新增用户数量",
				 	  "name":"count",
				 	  "data": "count",
				  	  "targets": [2],
				  	"bSortable": true,
					 "width": "8%"
				},
				{
					  "title":"时间",
					  "name":"startTime",
					  "data": "startTime",
					  "targets": [3],
					  "bSortable": true,
					  "width": "8%"
				}
  		  	],
  		  "sAjaxSource": ctx+"/statics/dailyreport/singleChannelList.action",
			"fnServerData": function ( sSource, aoData, fnCallback ) {//从服务器请求数据
		   			
					var channelCode = $("#code").val();
					var fromDate = $(".fromDate").val();
					var toDate = $(".endDate").val();
					var data =  {channelCode:channelCode,fromDate:fromDate,endDate:toDate};
					data.aoData = JSON.stringify(aoData);
					$.ajax({
						"type": "POST",
						"dataType": 'json',
						"url": sSource,
						"data": data,
						"beforeSend": function() {
							// 显示loading
							$(".load_bg,.load_img").show();
						},
						"success": function(resp){
						    console.log(resp);
							fnCallback(resp);
							initListPage();
							
							/* //生成图表
							var highchartsData = new Array();
							var allNum = Number(resp.total);
							var Num7 = 0;
							$.each(resp.aaData,function(index,item){
								if(index<7){
								    Num7 += Number(item.d8);
									var a = [item.name,item.d8];
									highchartsData.push(a);
								};
							});
						    var otherNum = allNum - Num7;
							var b = ['其他',otherNum];
							highchartsData.push(b);
							getHighcharts(highchartsData); */
							
						},		
						"error": function(XMLHttpRequest, textStatus, errorThrown) {
						},
						 complete:function(){
						    $('.load_bg,.load_img').hide();
						} 				
				  });
                  $.ajaxSetup({ 
                      xhrFields: { withCredentials: false }, 
                      crossDomain: true 
                  });
			},
			"bDestroy":true,
			"sScrollXInner": "100%",
  			"sScrollY": "100%",//如果不设置，IE会有问题
  		    "aaSorting": [[1,"desc"]]
  		});
  	});
  }
</script>
		
</body>
</html>
